import React, {useState} from "react";
import ReactDOM from "react-dom";
import "./app.css";
import Left from "../src/Left";
import RightMain from "../src/Right";
import {DndProvider} from "react-dnd";
import {HTML5Backend} from "react-dnd-html5-backend";
import MainPage from "../src/Content/MainPage";
import {JsonContext} from '../src/provider';
import Element from "../src/Content/Element";
function App() {
    const [allJson,setAllJson] = useState({
        "type":{
            "name":'div'// 四个type，div（布局），basecharts（常规charts），mapcharts（地图charts），reacteditor（自定义组件）
        },// 数据类型
        "children":[],
        "position":{},// 定制化的定位属性,布局用,主页面不需要此属性
        "id":'mainPage',// 组件id，mainPage为主页面
        "props":{
            "style":{
                "position":'absolute',
                "width":'100%',
                "height":'100%',
                "backgroundColor":'#898090',
                "overflow":'auto'
            },// 组件的style
            "designWidth":'1920px',// 主页的设计稿宽度，即配置的分辨率
            "designHeight":'1080px',// 主页的设计稿高度，即配置的分辨率
            "bgpic":"pic1",
        },// 组件参数
        "mappingVariableName":"jsona"
    });
    const jsonChange = (newJson)=>{
        setAllJson(newJson);
    };
    return (
        <div style={{height:'98vh',width:'100%'}}>
            <DndProvider backend={HTML5Backend}>
                <JsonContext.Provider value={{
                    allJson:allJson,
                    setJson:setAllJson,
                    }
                }>
                <div id={'main'} style={{position:'relative',height:'100%',width:'100%',display:'flex',flexDirection:'row',overflow:'hidden'}}>
                    <div id={'LeftArea'} style={{width:'30%',height:'100%'}}>
                        <Left jsonChange={jsonChange} json={allJson}/>
                    </div>
                    <div id={'dropArea'} style={{position:'relative',border:'1px solid #000',width:'60%',height:'100%',overflow:'auto'}}>
                        <Element key={"mainPage"} json={allJson}/>
                    </div>
                    <RightMain jsonChange={jsonChange} json={allJson}/>
                </div>
                </JsonContext.Provider>
            </DndProvider>
        </div>
    );
}

const root = document.getElementById("root");
ReactDOM.render(<App />, root);
